<template>
  <div>
    <h1>state</h1>
    <!-- <h2>{{ $store.state.user.username }}</h2> -->
    <h2>{{ username }}</h2>
    <h2>{{ userAge }}</h2>
    <hr />
    <h1>mutations</h1>
    <button @click="$store.commit('user/updateName', 'chann')">
      updateName
    </button>
    <hr />
    <h1>getters</h1>
    <h2>userGetters:{{ userGetters }}</h2>
    <hr />
    <h1>mutations</h1>
    <h2>主文件的count:{{ $store.state.count }}</h2>
    <h2>user的num:{{ $store.state.user.num }}</h2>
    <button @click="increment">user/increment</button>
    <hr />
    <button @click="$store.dispatch('user/userActionsRoot')">root:true</button>
    <button @click="userActions">userActions</button>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const {  mapMutations, mapActions } =
  createNamespacedHelpers("user");
import {useState, useGetters} from '../hooks/index'

export default {
  setup() {
    const state = useState("user",["username", "userAge"]);
    const getters =useGetters("user",["userGetters"]);
    const mutations =mapMutations(["increment"]);
    const actions =mapActions(["userActions"]);
    return {
      ...state,
      ...getters,
      ...mutations,
      ...actions
    };
  },
};
</script>

<style lang="scss" scoped>
</style>